Skip to content

Add focus-visible indicator to scrolling cards in Trusted By section#26933

Merged
MaanavD merged 2 commits intogh-pagesfrom
copilot/fix-focus-visibility-scrolling-cards
Jan 7, 2026
Merged

Add focus-visible indicator to scrolling cards in Trusted By section#26933
MaanavD merged 2 commits intogh-pagesfrom
copilot/fix-focus-visibility-scrolling-cards

Conversation

Copy link
Contributor

Copilot AI commented Jan 7, 2026

Keyboard users and low vision users cannot see focus on the scrolling logo cards in the Trusted By section, violating MAS 2.4.7 Focus Visible requirements.

Changes

  • Added focus-visible:ring-4 and focus-visible:ring-primary classes to anchor tags in InfiniteMovingCards.svelte
  • Added block h-full w-full to make the entire card area clickable and focusable
  • Added focus-visible:ring-offset-2 for clear visual separation

Before/After

Before: No visible focus indicator when tabbing through cards

After:
Focus ring visible on card

The focused card now displays a 4px cyan ring when navigated via keyboard, making focus state clearly visible.

Original prompt

This section details on the original issue you should resolve

<issue_title>Focus is not visible on Scrolling cards under Trusted By section: A11y_ONNX Runtime & Ecosystem_Runtime_Focus Visible</issue_title>
<issue_description>#A11yTCS #A11yMAS #A11ySev2 #MAS2.4.7#FocusVisible #DesktopWeb #Chrome #Win11 #BM_ONNX Runtime & Ecosystem_Web_June2025; #ONNX Runtime & Ecosystem; #Benchmark #rev:moda
"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification."

Environment Details:

Application Name: WCP URLs - ONNX Runtime
URL: https://onnxruntime.ai/
Chrome Version: 120.0.6099.130
OS: Windows 11 version 23H2

Steps to Reproduce

  1. Hit the URL "https://onnxruntime.ai/".
  2. "ONNX Runtime" home page appeared.
  3. Tab till "Toggle Scrolling" button and press enter.
  4. Tab till the scrolling cards.
  5. Observe that Focus is not visible on the cards.
    ###Actual:
    Focus is not visible on the scrolling cards under the Trusted By section.
    Note: Env is inconsistent some times issue is not repro

Expected:

Focus should be visible on the scrolling cards under the Trusted By section.

User Impact:

keyboard users and low vision users will face difficulties if focus is not visible on the cards.

Recommendations:

Refer[ Developer Resources (sharepoint.com)]

MAS Reference:

MAS 2.4.7 – Focus Visible
Check out MAS 2.4.7: Focus Visible Guide
Attachment

A11y_ONNX Runtime & Ecosystem_Runtime_Focus Visible 2.zip</issue_description>

<agent_instructions>fix the issue and open a PR</agent_instructions>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: MaanavD <24942306+MaanavD@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix focus visibility on scrolling cards under Trusted By section Add focus-visible indicator to scrolling cards in Trusted By section Jan 7, 2026
Copilot AI requested a review from MaanavD January 7, 2026 22:02
@MaanavD MaanavD marked this pull request as ready for review January 7, 2026 22:02
@MaanavD MaanavD enabled auto-merge (squash) January 7, 2026 22:02
@MaanavD MaanavD merged commit 4efcb86 into gh-pages Jan 7, 2026
1 of 2 checks passed
@MaanavD MaanavD deleted the copilot/fix-focus-visibility-scrolling-cards branch January 7, 2026 22:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants